<template>
  <v-scale-screen width="1920" height="1080">
    <ConfigProvider :get-popup-container="getPopupContainer" :locale="zhCN">
      <div id="screen-full" class="relative h-full w-full" :style="styles">
        <!-- 地图 -->
        <OlMap></OlMap>
        <!-- 可视化数据 -->
        <ScreenWrap></ScreenWrap>
      </div>
    </ConfigProvider>
  </v-scale-screen>
</template>
<route lang="json">
{
  "name": "screen",
  "meta": { "title": "数智大屏", "requireAuth": false, "layout": false }
}
</route>

<script setup lang="tsx">
import { useThemeState } from '@/layout/store/useThemeStore';
import { ConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import VScaleScreen from 'v-scale-screen';
import ScreenWrap from './components/ScreenWrap/index.vue';
import OlMap from './components/olMap/index.vue';

dayjs.locale('zh-cn');

const { styles } = useThemeState();

const getPopupContainer = () => {
  return document.getElementById('screen-full');
};
</script>

<style lang="scss">
/* 修复 z-index 和 pointer-events（有些版本下会需要） */
.v-screen-box {
  .ant-select-dropdown {
    pointer-events: auto;
    left: 0 !important;
    top: 30px !important;
  }
  .ant-tooltip {
    top: 35px !important;
  }
}
</style>
